@import '../../assets/stylesheets/colors.scss';
@import '../../assets/stylesheets/fonts.scss';

#browserComponentTopLevelDivlight{
  margin-top: 1px;
  display: flex;
  flex-direction: column;
  * {
    font-size: 0.75rem;
    font-family: 'comfortaa';
  }
  height: 100%;

  --label-color: #{$mint};
  --box-bg: #{$mint2};
  --box-color: black;
}

#browserComponentTopLevelDivdark{
  margin-top: 1px;
  display: flex;
  flex-direction: column;
  * {
    font-size: 0.75rem;
    font-family: 'comfortaa';
  }
  height: 100%;
  --label-color: #{$darkslategrey};
  --box-bg: #{$chromegray};
  --box-color: #{$eggshell};
}

#accessLensContainer{
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
}

#accessLensLabel {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--label-color);
  color: $eggshell;
  font-size: 1rem;
  height: auto;
  width: 100%;
  border: transparent;
  border-style: solid;
  padding: 5px 10px;
  * {
    flex: 1;
  }
}

#accessLensCheckBoxes{
  padding: 0 5px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  background-color: var(--box-bg);
  //border: $mint2;
  border: transparent;
  border-width: .05em;
  border-style: solid;
  *{
    transition: color 0.0s !important;
    color: var(--box-color);
  }
}

#browserBar {
  width: 100%;
  padding: 5px;
  background-color: $chromegray;
}

#browserAddress {
  width: 100%;
  padding: 8px;
  background-color: $chromegray-light;
  color: white;
  border: transparent;
  border-radius: 5px;

  &::placeholder {
    color: $eggshell-opaque;
  }
}

#browserView {
  height: 100%;
}




